
//左侧饼图
var color=["#856cff","#c700ce","#db1500","#e25e00","#f2fd58","#01c401", "#00989d", "#219eff"];
var pieData=[
	{name:'工商',value:1815053},
	{name:'电商',value:568769},
	{name:'新闻',value:529896},
	{name:'其他',value:505159},
	{name:'教育',value:204056},
	{name:'出版',value:169358},
	{name:'政府',value:121528},
	{name:'BBS',value:115990},
	/*{name:'广电',value:115360},
	{name:'卫生',value:86916},
	{name:'药监',value:62638},
	{name:'文化',value:38288},
	{name:'金融',value:8715}*/
]
//var legend=['工商','新闻','电商','卫生','药监','BBS','政府','广电','教育','文化','出版','金融','其他']
var legend=['工商','电商','新闻','其他','教育','出版','政府','BBS']


var pie3Opt = {
    color:color,
    textStyle:{},
    backgroundColor: 'transparent',
    legend: {
        orient: 'vertical',
        top: '15%',
        left:'77%',
        data:legend,
        show : true,
        textStyle:{
            color:'#fff'
        }
    },
    tooltip : {
    	textStyle:{},
      trigger: 'item',
      //formatter: "{a} <br/>{b} : {c} ({d}%)",
      formatter:function(param){
          if(param.name){
          	return  '<div>'+param.name+'</div>' +
	        '<div>'+param.value+'  ('+param.percent+'%)</div>'
          }
		},
        position:'right'
    },
    series: [{
        name: '',
        type: 'pie',
        radius: ['35%', '55%'],
        center: ['50%', '50%'],
        hoverAnimation: true,
        label: {
            normal: {
                show: false,
                position: 'center'
            },
            emphasis: {
                show: false,
                textStyle: {
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            }
        },
        data: pieData.sort(function(a,b){
        	return b.value - a.value
        })
    },{
        name: '',
        type: 'pie',
        clockWise: true,
        hoverAnimation: false,
        animationType: 'scale',
        radius: [200, 200],
        center: ['50%', '50%'],
        label: {
            normal: {
                position: 'center'
            }
        },
        data: [{
            value: 0,
            label: {
                normal: {
                    formatter: '38',
                    textStyle: {
                        color: '#20fd07',
                        fontSize: 25,
                        fontWeight: 'bold'
                    }
                }
            }
        }, {
            tooltip: {
                show: false
            },
            label: {
                normal: {
                    formatter: '\n',
                    textStyle: {
                        color: '#bbeaf9',
                        fontSize: 12
                    }
                }
            }
        }]
    }]
};
var pie3Chart = echarts.init(document.getElementById('webPie'))
pie3Chart.setOption(pieMapFont(pie3Opt))


var pieIndex = 0
var pieAutoShow = function(){
    if (pieIndex >7){
        pieIndex = 0
    }
    for (var i = 0;i <8;i++){
        if (i != pieIndex){
            pie3Opt.series[0].data[i]['selected'] = false;
        }else{
            pie3Opt.series[0].data[i]['selected'] = true;
        }
    }
    //pie3Opt.series[1].data[0].label.normal.formatter = pie3Opt.series[0].data[pieIndex].value + ""
    //pie3Opt.series[1].data[0].label.normal.formatter=parseInt(Math.random()*99) + "%"
    pie3Opt.series[1].data[0].label.normal.formatter = (pie3Opt.series[0].data[pieIndex].value/allData(pieData)*100).toFixed(1) + "%"
    pie3Opt.series[1].data[1].label.normal.formatter = "" + pie3Opt.series[0].data[pieIndex].name
    pie3Chart.setOption(pie3Opt)
    pieIndex++
    setTimeout(pieAutoShow,1200)
}
pieAutoShow()

function allData(data){
	var allNum=0
	for(var a=0;a<data.length;a++){
		allNum+=data[a].value
	}
	return allNum
}

//左下饼图
/*var data1st=[
    {value:1741111, name:'基础企业'},
    {value:3904034, name:'增值企业'},
]
var pieOpt={
    color : ["#00a9e1", "#ff8700","#0046af","#360293"],
    tooltip : {
        trigger: 'item',
        confine : true,//显示的位置调整
        formatter: "{a} <br/>{b} : {c} ({d}%)"
    },
    legend: {
        bottom:10,
        textStyle:{
            color: 'rgba(255,255,255,0.8)'
        },
        orient: 'horizontal',
        data: ['基础企业','增值企业']
    },
    series : [
        {
            name: '',
            type: 'pie',
            radius : '60%',
            center: ['50%', '50%'],
            data: [],
            itemStyle: {
                emphasis: {
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
            },
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
            lableLine: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
        }
    ]
}
pieOpt.series[0].data=data1st;
var pie1Chart = echarts.init(document.getElementById('joinWebPie'));
pie1Chart.setOption(pieOpt);
*/
//地图
var geoCoordMap = {};
var mapData=[
	{name:'广东',value:745191},
	{name:'四川',value:468536},
	{name:'北京',value:437718},
	{name:'上海',value:412897},
	{name:'山东',value:390607},
	{name:'福建',value:365505},
	{name:'江苏',value:188806},
	{name:'浙江',value:169023},
	{name:'天津',value:164306},
	{name:'湖北',value:126492},
	{name:'云南',value:114841},
	{name:'重庆',value:110920},
	{name:'湖南',value:94288},
	{name:'安徽',value:73617},
	{name:'河北',value:73599},
	{name:'广西',value:56281},
	{name:'陕西',value:53702},
	{name:'江西',value:38297},
	{name:'河南',value:30416},
	{name:'黑龙江',value:29917},
	{name:'辽宁',value:25375},
	{name:'吉林',value:15545},
	{name:'新疆',value:12828},
	{name:'甘肃',value:12701},
	{name:'贵州',value:7227},
	{name:'山西',value:7156},
	{name:'海南',value:6441},
	{name:'宁夏',value:2278},
	{name:'青海',value:1449},
	{name:'内蒙古',value:1402},
	{name:'西藏',value:338},
   /* {name: '台湾',value:0 },
    {name: '香港',value: 0},
    {name: '澳门',value: 0}*/
]
var convertData = function (data) {
  var res = [];
  for (var i = 0; i < data.length; i++) {
      var geoCoord = geoCoordMap[data[i].name];
      if (geoCoord) {
          res.push({
              name: data[i].name,
              value: geoCoord.concat(data[i].value),
//            comp: data[i].comp,
//           	room: data[i].room,
//           	ip: data[i].ip,
//           	domain: data[i].domain
          });
      }
  }
  return res;
};
var mapFeatures = echarts.getMap('china').geoJson.features;
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});

var symbolSize=function(data,val){
	var max=0;
	for(var i=0;i<data.length;i++){
		if(data[i].value>max||data[i].value==max){
			max=data[i].value
		}
	}
//	console.log(val[2]/max*20+10)
	return val[2]/max*20+10
}

var optionMap = {
		textStyle:{},
    tooltip: {
        trigger: 'item',
        textStyle:{},
        formatter:function(param){
//			console.log(param)
            return '<div>'+param.name+'<br/>IDC接入网站数量：'+param.value[2]+'</div>'
        }
    },
	   geo: {
			show: true,
			zoom: 1.2,
			roam: false,	
			map:'china',
			itemStyle: {
				normal: {
					show:false,
					borderColor: '#285ac6',
					borderWidth: 1,
					areaColor: '#123082',
					shadowBlur: 3,
					shadowColor:'#081435',
					shadowOffsetX: -4,
					shadowOffsetY: 8
				},
				emphasis: {
					areaColor: '#fce24f',
					borderColor: '#fce24f'
				}
			}
		},
    series: [{
        zoom: 1.2,
        type: 'map',
        mapType: 'china',
        roam: false,
        tooltip: {
	        trigger: 'item',
	        formatter:function(param){
//						console.log(param)
            return '<div>'+param.name+'<br/>IDC接入网站数量：'+param.data.value[2]+'</div>'
	        }
	    	},
        label: {
            normal: {
                show: false,
                textStyle: {
                    color: '#fff'
                }
            },
            emphasis: {
                show: false,
                textStyle: {
                    color: '#fff'
                }
            }
        },
        itemStyle: {
            normal: {
                show:false,
                borderColor: '#3770ea',
								borderWidth: 1,
								areaColor: '#0f2d87'
            },
            emphasis: {
                areaColor: '#2a56bd',
								borderColor: '#2a56bd',
            }
        },
        data:convertData(mapData)
    },{
		 	name: 'Top 5',
      type: 'effectScatter',
      zlevel: 1,
      coordinateSystem: 'geo',
      symbolSize: function (val) {
          return symbolSize(mapData,val)
      },
      showEffectOn: 'render',
      rippleEffect: {
          brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
          normal: {
//            formatter: '{b}',
		        position: 'right',
		        show: false
          }
      },
      itemStyle: {
          normal: {
              color: '#f4e925',
              shadowBlur: 10,
              shadowColor: '#333'
          }
      },
//    data: convertData(mapData)
			data:convertData(mapData.sort(function (a, b) {
          return b.value - a.value;
      }).slice(0, 5))
	},{
		 	name: 'Top 5',
      type: 'scatter',
      zlevel: 1,
      coordinateSystem: 'geo',
      symbolSize: function (val) {
        return symbolSize(mapData,val)
      },
      showEffectOn: 'render',
      rippleEffect: {
          brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
          normal: {
//            formatter: '{b}',
		        position: 'right',
		        show: false
          }
      },
      itemStyle: {
          normal: {
              color: '#f4e925',
              shadowBlur: 10,
              shadowColor: '#333'
          }
      },
//    data: convertData(mapData)
			data:convertData(mapData.sort(function (a, b) {
          return b.value - a.value;
      }).slice(5))
	}]
};
var mapChart = echarts.init(document.getElementById('webChina'))
mapChart.setOption(pieMapFont(optionMap))

function pieMapFont(el){
	var winW=$(window).width();
	var fontSize=winW>3000?20:12
	el.textStyle.fontSize=fontSize
	el.tooltip.textStyle.fontSize=fontSize
	return el
}

//右柱状图
var yData1=['广东','四川','北京','上海','山东','福建','江苏','浙江','天津','湖北']
var xData1=[745191,468536,437718,412897,390607,365505,188806,169023,164306,126492]

var yData2=['iqiyi.com','qq.com','baidu.com','12306.cn','xunlei.com','163.com','4399.com','kugou.com','itunes.com','vivo.com']
var xData2=[340.90,43.51,10.67,8.08,4.11,3.71,3.57,2.89,2.46,2.10]

function ecBarOpt(yData,xData,no) {
	var winW=$(window).width();
	var fontSize=winW>3000?20:12
	var rotate=winW>3000?0:20
	var type,name,color=''
	if(yData===yData1){
		color= '#0ea4e3'
		type='value'
		name = ''
	}else{
		type='log'
		name = '单位/万亿'
		color= '#b6cc83'
	}
	var barOption = {
		textStyle: {
			fontSize: fontSize
		},
		color: color,
		tooltip: {
			textStyle: {
				fontSize: fontSize
			},
			trigger: 'axis',
			formatter: '{a}<br />{b} : {c}',
			axisPointer: {
				type: 'shadow',
			}
		},
		grid: {
			left: '1%',
			top: '10%',
			right: '2%',
			bottom: '1%',
			containLabel: true
		},
		xAxis: {
			type: 'category',
			splitLine: { //grid区域分隔线
				show: false,
				lineStyle: {
					width: 1,
					type: "solid",
					color: "#272858"
				}
			},
			axisLabel: { //坐标轴标签
				show: true,
				textStyle: {
					color: 'c0d4da'
				},
				fontSize: fontSize,
				interval: false,
				rotate: rotate
			},
			axisTick: {
				show: true //刻度线
			},
			axisLine: {
				show: true, //坐标轴轴线
				lineStyle: {
					width: 1,
					color: "#c0d4da"
				}
			},
			data: yData
		},
		yAxis: {
			type: type,
			logBase: 10,
			splitLine: { //grid区域分隔线
				show: true,
				lineStyle: {
					width: 1,
					type: "solid",
					color: "#2a3f7e"
				}
			},
			name: name,
			axisTick: {
				show: true //刻度线
			},
			axisLine: {
				show: true, //坐标轴轴线
				lineStyle: {
					width: 1,
					color: "#c0d4da"
				}
			},
			axisLabel: { //坐标轴标签
				show: true,
				color: '#c0d4da',
				fontSize: fontSize
			},
		},
		series: [
			{
				name: '网站访问量',
				type: 'bar',
				barGap: '-100%',
				barCategoryGap: '60%',
				data: xData,
				itemStyle: {
					normal: {
//						color: '#b6cc83'
					}
				},
			}
		]
	};
	console.log(barOption)
	return barOption
}
 

var barChart1 = echarts.init(document.getElementById('webBar1'))
barChart1.setOption(ecBarOpt(yData1,xData1));   
var barChart2 = echarts.init(document.getElementById('webBar2'))
barChart2.setOption(ecBarOpt(yData2,xData2));
window.addEventListener("resize", function () {
 	mapChart.resize();
 	mapChart.setOption(pieMapFont(optionMap))
	pie3Chart.resize();
	pie3Chart.setOption(pieMapFont(pie3Opt))
	mapChart.setOption(pieMapFont(optionMap))
  barChart2.setOption(ecBarOpt(yData2,xData2));
  barChart1.setOption(ecBarOpt(yData1,xData1));
  barChart1.resize();
  barChart2.resize();
});








